<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转图</title>
		<style >
		body{
			margin-top: 100px;
		}
		.earth-rotate{
			margin: 0 auto;
			width: 600px;
			height: 600px;
			
			background-image: url(../picture/ti.jpg);
			border-radius: 350px;
			
			-webkit-animation: run 10s linear 0s infinite;
		}
		@-webkit-keyframes run{
			from{-webkit-transform: rotate(0deg);}
			to{-webkit-transform: rotate(360deg);}
		}
		.earth-rotate:hover{
			-webkit-animation-play-state: paused;
		}
		.earth-rotate1{
			margin: 0 auto;
			width: 260px;
			height: 241px;
			margin-top: 100px;
			background-image: url(../picture/timg.jpg);
			border-radius: 150px;
			
			-webkit-animation: run1 1s linear 0s infinite;
		}
		@-webkit-keyframes run1{
			from{-webkit-transform: rotate(360deg);}
			to{-webkit-transform: rotate(0deg);}
		}
		.earth-rotate1:hover{
			-webkit-animation-play-state: paused;
		}
		</style>
	</head>
	<body>
		<div class="earth-rotate">
		</div>
		<div class="earth-rotate1">
		</div>
	</body>
</html>
